<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>文本与图片标签规范应用示例</title>

    <style>

        body { max-width: 800px; margin: 0 auto; padding: 20px; line-height: 1.8; }

        .text-group { margin-bottom: 30px; padding: 15px; border: 1px solid #eee; border-radius: 8px; }

        .image-group { margin: 30px 0; }

        figure { margin: 20px 0; }

        figcaption { color: #666; font-style: italic; text-align: center; }

    </style>

</head>

<body>

    <header>

        <h1>HTML文本与图片标签综合应用</h1>

        <p>本示例展示规范的文本格式化与图片展示标签用法</p>

    </header>



    <section>

        <h2>一、文本结构标签</h2>

        

        <h3>1. 标题层级（h1-h6）</h3>

        <p>标题标签严格遵循层级关系，反映内容逻辑：</p>

        <h4>这是四级标题（h4）</h4>

        <h5>这是五级标题（h5）</h5>

        <h6>这是六级标题（h6）</h6>



        <h3>2. 文本格式化</h3>

        <p>基础段落文本中可嵌入语义化格式标签：</p>

        <ul>

            <li><strong>strong标签：表示重要内容，默认加粗显示</strong></li>

            <li><em>em标签：表示强调内容，默认斜体显示</em></li>

            <li><mark>mark标签：突出显示关键内容，默认黄色背景</mark></li>

            <li><del>del标签：表示删除的内容，默认带删除线</del></li>

            <li><ins>ins标签：表示插入的内容，默认带下划线</ins></li>

            <li>小型文本：<small>small标签用于附属说明文字</small></li>

        </ul>



        <h3>3. 特殊格式文本</h3>

        <p>化学方程式：CO<sub>2</sub> + H<sub>2</sub>O → H<sub>2</sub>CO<sub>3</sub>（使用sub标签）</p>

        <p>数学公式：(a + b)<sup>2</sup> = a<sup>2</sup> + 2ab + b<sup>2</sup>（使用sup标签）</p>



        <h3>4. 引用与列表</h3>

        <blockquote cite="https://example.com/quotes">

            blockquote标签用于长引用，可通过cite属性标注来源。浏览器默认会添加缩进样式，增强与正文的区分度。

        </blockquote>

        

        <p>短引用示例：<q>q标签用于短句引用，默认会添加引号</q></p>



        <p>定义列表（描述术语与解释）：</p>

        <dl>

            <dt>HTML</dt>

            <dd>超文本标记语言，用于构建网页结构</dd>

            <dt>CSS</dt>

            <dd>层叠样式表，用于美化网页外观</dd>

        </dl>

    </section>



    <section>

        <h2>二、图片标签应用</h2>

        

        <h3>1. 基础图片展示</h3>

        <img src="https://picsum.photos/800/400?random=1" 

             alt="山水风景图，远处有山峦和树木，近处有湖泊" 

             width="800" 

             height="400" 

             loading="lazy">

        <p>标签说明：src指定图片路径，alt提供替代文本（图片加载失败或屏幕阅读器使用），loading="lazy"实现懒加载提升性能</p>



        <h3>2. 带说明的图片组</h3>

        <figure>

            <img src="https://picsum.photos/800/300?random=2" 

                 alt="城市建筑天际线，傍晚时分的建筑群" 

                 width="800" 

                 height="300">

            <figcaption>图1：现代城市建筑景观（使用figure和figcaption实现图片与说明的语义关联）</figcaption>

        </figure>



        <h3>3. 图片链接与响应式设置</h3>

        <a href="https://picsum.photos/" target="_blank">

            <img src="https://picsum.photos/400/400?random=3" 

                 alt="点击查看更多风景图片" 

                 style="max-width: 100%; height: auto; border: 2px solid #ccc; border-radius: 4px; padding: 5px;">

        </a>

        <p>该图片添加了响应式样式（max-width:100%），可随容器宽度自适应缩放，同时嵌套在a标签中实现点击跳转</p>

    </section>

</body>

</html>